import React from "react";
import {inject, observer} from "mobx-react";
import {withRouter} from "react-router-dom";
import {Accordion, Avatar, Tools} from "weaver-mobile";
import {WrMenu, WrShow} from "../../../public";
import {ListViewPage} from "weaver-mobile-page";

const getLabel = Tools.getLabel;

/**
 * 考核报表-详情
 * jiansong 2019/11/8
 */
@inject("reportStore")
@withRouter
@observer
export default class Index extends React.Component {

    constructor(props) {
        super(props);
        this.store = this.props.reportStore;
    }

    render() {
        const {reportListStore, hasInit, stabList} = this.store;
        return [
            <WrShow show={hasInit && stabList && stabList.length > 0}>
                <div className="report-content">
                    <ListViewPage.Normal
                        heightSpace={window.getThemeVars ? window.getThemeVars()["hd"] * 49 : 52}
                        getDataCustom={true}
                        store={reportListStore}
                        getTemplate={this.buildTemplate}
                        onRefresh={this.handleRefresh}
                        onEndReached={this.handleEndReached}
                    />
                </div>
            </WrShow>,
            <WrMenu data={this.props.menu}
                    onSelect={val => this.props.history.push(val.props.path)}/>
        ]
    }

    //构建列表样式
    buildTemplate = (template) => {
        const {fieldArray} = this.store;
        return {
            default: [{
                key: "col_1",
                render: (data) => <Accordion>
                    <Accordion.Panel header={this.buildItem(data)}>
                        <table>
                            <thead>
                            <tr>
                                <th>{getLabel(513692, "考核期间")}</th>
                                <th>{getLabel(506161, "考核成绩")}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {fieldArray.map((item, index) => <tr key={index}>
                                <td>{item.label}</td>
                                <td onClick={() => this.handleScore(data, item)}>
                                    {data["result" + item.value] || "-"}
                                </td>
                            </tr>)}
                            </tbody>
                        </table>
                        <div style={{height: "10px", "background": "#F3F7FE"}}/>
                    </Accordion.Panel>
                </Accordion>
            }]
        }
    }

    //构建表单
    buildItem = (data) => {
        return (
            <span className="report-header">
                <span>
                    <span style={{display: "flex"}}>
                        {/* <Avatar name={data.lastname} type="2" style={{display: "flex"}} url={data.headerUrl}/> */}
                        <Avatar userId={data.id} style={{display: "flex"}}/>
                        <span className="report-header-content">
                            <span>
                                {data.lastname}
                            </span>
                            <span>
                                <span>{data.subCompanyName}</span>
                                <span>{data.departmentName}</span>
                            </span>
                        </span>
                    </span>
                </span>
                <span>{data.num}</span>
            </span>
        )
    }

    //处理跳转评分详情
    handleScore = (data, item, index) => {
        const {queryParams} = this.store;
        if (data["scoreid" + item.value]) {
            this.props.history.push("/performance/report/accessView?scoreid=" + data["scoreid" + item.value])
        } else {
            if (queryParams.type1 == 1 || queryParams.type1 == 2) {
                this.props.history.push("/performance/report/accessView?resourceid=" + data.id + "&year=" + queryParams.year + "&type1=" + queryParams.type1 + "&type2=" + item.key)
            } else {
                this.props.history.push("/performance/report/accessView?resourceid=" + data.id + "&year=" + item.key + "&type1=" + queryParams.type1)
            }
        }
    }

    //下拉刷新
    handleRefresh = () => {
        const {reportListStore, onSearchChange, getTableDatas} = this.store;
        onSearchChange({current: 1});
        getTableDatas(false);
    }

    //底部加载
    handleEndReached = () => {
        const {onSearchChange, queryParams, getTableDatas} = this.store;
        onSearchChange({current: queryParams.current + 1});
        getTableDatas(true);
    }

}
